<template>
  <div>
    <el-image
      style="width: 100px; height: 100px; margin-left: 50px;border-radius: 50%;display: inline-block;"
      src="../../../public/avator.png"
    />
    <span style="line-height: 100px; font-weight: bolder; margin: 0 20px">
      租户编号：{{ data.list[0].contract_number }}
    </span>
  </div>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="基本信息" name="first">
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="data.list"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="contract_number"
          label="租客类型"
          min-width="25%"
        />
        <el-table-column
          prop="contract_name"
          label="租客姓名"
          min-width="25%"
        />
        <el-table-column
          prop="contract_name"
          label="租住开始时间"
          min-width="25%"
        />
        <el-table-column
          prop="start_time"
          label="租住结束时间"
          min-width="25%"
        />
      </el-table>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="data.list"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="end_time" label="租金" min-width="25%" />
        <el-table-column prop="personname" label="租住方案" min-width="25%" />
        <el-table-column prop="idcard" label="合同编号" min-width="25%" />
        <el-table-column prop="idcard" label="合同签订时间" min-width="25%" />
      </el-table>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="data.list"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="start_time" label="手机号" min-width="25%" />
        <el-table-column prop="start_time" label="身份证号" min-width="25%" />
        <el-table-column prop="contract_number" label="籍贯" min-width="25%" />
        <el-table-column prop="status" label="联系地址" min-width="25%" />
      </el-table>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="data.list"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="contract_number"
          label="紧急联系人"
          min-width="25%"
        />
        <el-table-column
          prop="contract_number"
          label="联系电话"
          min-width="25%"
        />
        <el-table-column
          prop="contract_number"
          label="身份证照片 正面"
          min-width="25%"
        />
        <el-table-column
          prop="contract_number"
          label="身份证照片 反面"
          min-width="25%"
        />
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="附件" name="second">
      <el-card style="max-width: 360px;display: inline-block;">
        <template #header>
          <div class="card-footer">
            <span style="font-weight: bolder;">身份证 正面</span>
          </div>
        </template>
        <el-image src="../../../public/idcard-1.png"></el-image>
        <template #footer>Footer content</template>
      </el-card>
      <el-card
        style="max-width: 360px;display: inline-block;margin-left: 30px;"
      >
        <template #header>
          <div class="card-footer">
            <span style="font-weight: bolder;">身份证 反面</span>
          </div>
        </template>
        <el-image src="../../../public/idcard-1.png"></el-image>
        <template #footer>Footer content</template>
      </el-card>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { reactive } from 'vue'
import { useRoute } from 'vue-router'
export default {
  setup() {
    const data = reactive({
      list: [],
    })
    var contractData = reactive([])
    var router = useRoute()
    contractData = router.query
    data.list.push(contractData)
    return { contractData, data }
  },
}
</script>
